<template>
    <div>
      <h1>子组件</h1>
    </div>
  </template>
  
  <script lang="ts">
  import {
    defineComponent,
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted,
  } from "vue";
  
  export default defineComponent({
    setup() {
      onBeforeMount(() => {
        console.log("子组件的onBeforeMount");
      });
      onMounted(() => {
        console.log("子组件的onMounted");
      });
      onBeforeUpdate(() => {
        console.log("子组件的onbeforeUpadte");
      });
      onUpdated(() => {
        console.log("子组件的onUpdated");
      });
      onBeforeUnmount(() => {
        console.log("子组件的onBeforeUnmount");
      });
      onUnmounted(() => {
        console.log("子组件onUnmounted");
      });
      return {};
    },
    beforeCreate() {
      console.log("子组件的beforeCreate");
    },
    created() {
      console.log("子组件的created");
    },
    beforeMount() {
      console.log("子组件的beforeMount");
    },
    mounted() {
      console.log("子组件的mounted");
    },
    beforeUpdate() {
      console.log("子组件的beforeUpdate");
    },
    updated() {
      console.log("子组件的updated");
    },
    beforeUnmount() {
      console.log("子组件的beforeUnmount");
    },
    unmounted() {
      console.log("子组件的unmounted");
    },
  });
</script>

<style scoped>

</style>